<template>
  <!-- 复选框的组别 -->
  <van-checkbox-group class="van-checkbox-group1" v-model="checked" @change="ToggleGroup" ref="CheckboxGroup">
    <div class="cart" v-for="(item,key) in list" :key="key">
      <!-- 复选框 name绑定购物车id -->
      <van-checkbox :name="item.id"></van-checkbox>
      <!-- 滑动单元格 -->
      <van-swipe-cell>
        <!-- 商品卡片 -->
        <van-card
          :title="item.product.name"
          :thumb="item.product.thumbs_text"
          @click-thumb="toProductInfo(item.proid)"
        >
          <template #title>
            <div class="title">{{ item.product.name }}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc v-if="item.attrs">
            <van-tag v-for="(attr,index) in item.attrs" :key="index" class="tag" type="primary">{{ attr.value }}</van-tag>
          </template>

          <template #desc v-else>
            <van-tag class="tag" type="danger">无规格数据</van-tag>
          </template>

          <template #tags>
            <div class="price">单价：￥{{ item.price }}</div>
          </template>

          <template #price>
            <div class="price">合计：￥{{ item.total }}</div>
          </template>

          <!-- 卡片的商品数量 步进器 -->
          <template #num>
            <van-stepper v-model="item.nums" @change="CartUpdate(item)" />
          </template>
        </van-card>

        <!-- 滑动单元格插槽 右侧滑动 -->
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
  </van-checkbox-group>

  <!-- 提交动作栏 -->
  <van-submit-bar :price="total" button-text="提交订单" @submit="confirm">
    <van-checkbox v-model="CheckedAll" :indeterminate="isIndeterminate" @change="toggle">全选</van-checkbox>
  </van-submit-bar>

  <!-- <tabbar /> -->
</template>

<script setup>
  import tabbar from '@/components/common/tabbar.vue'

  const { proxy } = getCurrentInstance()

  let list = ref([])
  let checked = ref([]) //默认选中复选框
  let CheckedAll = ref(false)
  let CheckboxGroup = ref(null)
  let isIndeterminate = ref(false);

  onBeforeMount(() => {
    CartInfo()
  })

  // 购物车数据查询
  const CartInfo = async () => {
    var result = await proxy.$POST({
      url: '/cart/index',
      params:{busid:proxy.$business.value.id}
    })

    if (result.code == 0) {
      proxy.$fail(result.msg)
      return false
    }

    result.data.map(item => {
      item.attrs = JSON.parse(item.attrs)
    })

    list.value = result.data

  }

  //跳转到购物车详情界面
  const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })

  // 全选切换
  const toggle = () => CheckboxGroup.value.toggleAll()

  // 判断单个选中
  const ToggleGroup = (names) => {
    CheckedAll.value = checked.value.length == list.value.length
    isIndeterminate.value = checked.value.length > 0 && checked.value.length < list.value.length
  }

  // 合计的价格
  let total = computed(() => {
    var total = 0

    list.value.map((item) => {
      if (checked.value.includes(item.id)) total += parseFloat(item.total)
    })

    return parseFloat(total*100)
  })

  //更新购物车数量
  let CartUpdate = async (item) => {
    var result = await proxy.$POST({
      url: '/cart/edit',
      params:{cartid:item.id,nums:item.nums}
    })

    if (result.code == 0) {
      proxy.$fail(result.msg)
      return false
    }

    CartInfo()
  }

  // 删除购物车
  let del = async (item) => {
    proxy.$confirm({
      message: '是否确认删除' + item.product.name + "?",
    }).then(async () => {
      // 发起请求
      let result = await proxy.$POST({
        url: '/cart/del',
        params: { cartid: item.id },
      });

      if (result.code == 0) {
        proxy.$fail(result.msg);
        return false;
      } else {
        CartInfo();
      }
    }).catch(()=>{})
  }

  // 确认订单
  let confirm = () => {
    if (checked.value.length <= 0) {
      proxy.$fail('请选择购物车产品')
      return false
    }

    proxy.$router.push({ path: '/cart/confirm', query: { cartids: checked.value.join(',') } })

  }

</script>

<style>
  html,body{
    width: 100%;
    height:100%;
  }
</style>

<style scoped>
  :deep(.cart) {
    display: flex;
    width: 100%;
  }
  ::v-deep .van-swipe-cell {
    width: 100%;
  }
  .delete-button {
    height: 100%;
  }


  .van-card{
    background-color:#fff;
  }

  .title{
    font-size:16px;
    font-weight: bold;
  }

  .tag{
    margin-right:5px;
  }

  .price{
    font-size:14px;
    font-weight: bold;
  }

  .van-checkbox-group1{
    overflow: scroll;
    height:615px;
  }
</style>
